[Chrome] JSON ViewerでJSONを見やすくしよう！

API開発や利用を行うとき、ブラウザでJSONを取得することがあります。 APIドキュメントによってはJSON構造と型のみが書かれている場合もあり、「実際にどんな値が入っているの？」を確認したい場合などです。

しかし、次のように文字列が単純表示されているとかなり見にくいです。

これは気象情報を取得するOpenWeatherMapのAPIを叩いた際のレスポンスです。 分かりやすく見ようと思うと、何らかのJSON FormatterでPretty表示することが多いです。

この作業（JS0Nコピー＆JSON Fomatterに貼り付け＆Pretty表示）が地味に手間です。そこでChrome拡張機能で楽しちゃいましょう！！！

JSON Viewer

下記の拡張機能をインストーするだけです！

• JSON Viewer - Chrome ウェブストア

JSONが構造化されて表示される

実際に冒頭のJSONを表示したものがこちらです。

圧倒的に見やすいですね！

上部メニューのSaveを選択すればJSONファイルとしてダウンロードができますし、Copyを押せばクリップボードにJSONをコピーしてくれます。

折りたたみ表示ができる

▼マークを押せば折りたたみ表示ができます。

上部のCollapse AllやExpand Allを押せば、「全部折りたたみ」や「折りたたみを全展開」もできます。

フィルタリングができる

左上のフィルタリングを入力すると、イイカンジにフィルタリングして表示できます。KeyとValueのどちらも対象です。

生データ表示ができる

Raw Dataにタブを切り替えれば生データ表示もできます。

Pretty Printを押せば整形表示もバッチリです。

Header情報が見れる

リクエストとレスポンスのヘッダー情報が見れます。見る機会は少ないかもしれませんば、Webアプリ開発をしている場合などでお世話になるかもしれません。

さいごに

JSONに関しては様々な拡張機能がありますが、個人的にはFirefox標準の表示が好きなので、ChromeでもFirefoxと同じ表示ができる拡張機能を求めていました。 ドンピシャでした。

JSON関連の拡張機能は導入済みの方は多いと思いますが、まだ導入してない方やこっちのほうが良さそうという方の参考になれば幸いです。

参考

• JSON Viewer - Chrome ウェブストア